import React, { useState } from 'react';
import './EmojiPicker.css';

interface EmojiPickerProps {
    onEmojiSelect: (emoji: string) => void;
}

const EmojiPicker: React.FC<EmojiPickerProps> = ({ onEmojiSelect }) => {
    const [activeCategory, setActiveCategory] = useState('smileys');

    const emojiCategories = {
        smileys: {
            name: '笑脸',
            emojis: ['😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇', '🙂', '🙃', '😉', '😌', '😍', '🥰', '😘', '😗', '😙', '😚', '😋', '😛', '😝', '😜', '🤪', '🤨', '🧐', '🤓', '😎', '🤩', '🥳']
        },
        gestures: {
            name: '手势',
            emojis: ['👍', '👎', '👌', '✌️', '🤞', '🤟', '🤘', '🤙', '👈', '👉', '👆', '🖕', '👇', '☝️', '👋', '🤚', '🖐️', '✋', '🖖', '👏', '🙌', '👐', '🤲', '🤝', '🙏', '✍️', '💪', '🦾', '🦿', '🦵', '🦶']
        },
        animals: {
            name: '动物',
            emojis: ['🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯', '🦁', '🐮', '🐷', '🐸', '🐵', '🙈', '🙉', '🙊', '🐒', '🐔', '🐧', '🐦', '🐤', '🐣', '🐥', '🦆', '🦅', '🦉', '🦇', '🐺', '🐗']
        },
        objects: {
            name: '物品',
            emojis: ['❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍', '🤎', '💔', '❣️', '💕', '💞', '💓', '💗', '💖', '💘', '💝', '💟', '☮️', '✝️', '☪️', '🕉️', '☸️', '✡️', '🔯', '🕎', '☯️', '☦️', '🛐', '⛎']
        },
        symbols: {
            name: '符号',
            emojis: ['🔥', '💯', '⚡', '⭐', '🌟', '💫', '✨', '💥', '💢', '💨', '💦', '💤', '🕳️', '💣', '💬', '👁️‍🗨️', '🗨️', '🗯️', '💭', '🕐', '🕑', '🕒', '🕓', '🕔', '🕕', '🕖', '🕗', '🕘', '🕙', '🕚', '🕛']
        }
    };

    const handleEmojiClick = (emoji: string) => {
        onEmojiSelect(emoji);
    };

    return (
        <div className="emoji-picker-dropdown">
            <div className="emoji-picker-tabs">
                {Object.entries(emojiCategories).map(([key, category]) => (
                    <button
                        key={key}
                        className={`tab-btn ${activeCategory === key ? 'active' : ''}`}
                        onClick={() => setActiveCategory(key)}
                    >
                        {category.name}
                    </button>
                ))}
            </div>

            <div className="emoji-picker-content">
                <div className="emoji-grid">
                    {emojiCategories[activeCategory as keyof typeof emojiCategories].emojis.map((emoji, index) => (
                        <button
                            key={index}
                            className="emoji-btn"
                            onClick={() => handleEmojiClick(emoji)}
                            title={emoji}
                        >
                            {emoji}
                        </button>
                    ))}
                </div>
            </div>
        </div>
    );
};

export default EmojiPicker;
